<template>
   <div>
      <div class="areatitle">
          <router-link to="/home/workplace">
          <i class="iconfont icon-back"></i>
          </router-link>
          <div class="inner"></div>
          <div class="atitle">
            标&nbsp;题&nbsp;:
            <el-input v-model="input" placeholder="请输入" class="input" @input="changeview($event)"></el-input>
          </div>
          <el-button class="button-share" type="primary" icon="el-icon-share" circle @click="share"></el-button>
          <el-button class="button-star" type="success" icon="el-icon-star-off" circle @click="star"></el-button>
          <el-button class="button-comment" type="warning" icon="el-icon-document" circle @click="comment"></el-button>

        </div>

        <div class="editarea">
      
          <div class="rich-container">
          <div class="rich-editor document-editor">
          <div id="toolbar-container" class="document-editor__toolbar" />
          <div class="document-editor__editable-container">
          <div id="editor" class="document-editor__editable" />
          </div>
          </div>
          </div>


        </div>

         <div class="comments" style="margin-left:80px;margin-right:80px;border:1px solid grey;">
          评论区
          <ul class="comment_list">
            <div>评论者&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 内容&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论时间</div>
          <li v-for="(comment,index) in commentList" :key="index" style="padding: 10px;">
            <!-- 
                <div style="text-align: left; font-size: 15px;color: #409EFF;vertical-align:center;vertical-align: middle;line-height: 20px"><el-avatar size="medium" :src="comment.avatar"></el-avatar>&nbsp;&nbsp;&nbsp;{{comment.username}}</div>
             -->
            
            <div style="text-align: left; padding-left: 10px;padding-top: 5px;padding-bottom: 5px">&nbsp;&nbsp;&nbsp;&nbsp;<span>{{comment.name}}</span>
            
            <span>{{comment.content}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>{{comment.create_time}}</span>
            </div>
            
            <!-- 
               <div style="text-align: right;padding-top: 5px;">{{formatDate(comment.created)}}</div>
             -->
           
          </li>
        </ul>
        </div>
        <div class="footarea">
          <el-button id="submit" type="primary" @click="get">获取内容</el-button>
          <el-button id="submit" type="primary" @click="submit">新建</el-button>
          <el-button id="submit" type="primary" @click="change">修改</el-button>
        </div>
        
   </div>
        

</template>


<script>
import { mapState } from 'vuex';
import { reqUpdate,reqCreate,reqAddComment,reqGetComment,reqFetch,reqLikeornotArticle, reqCreateTeamArticle} from '../../api';
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "Edit",
  components: {
  },
  data(){
    return {
      editor:null,
      isstar:false,
      comment:"",
      content:"",
      input:"",
      
      userid:this.userInfo.userid,
      articleid:"",
      isload:false,
      props: { multiple: true },

      auth:"write",

      invitelink:"",

      time:""
}
},

  computed:{
    ...mapState(['userInfo','onedit','checkTeamInfo','commentList']),
    ...mapGetters(['user']), 
  },

  created(){
    
  },
  async mounted() {
    this.fresh()
    .then(
      this.initEditor()
    )
    this.getCommentList(this.articleid)
    console.log(this.commentList)
    
  },

  methods: {
    ...mapActions(['getUserInfo','recordOnEdit','recordCommentMessageList','getCommentList']),
  
    initEditor() {
      this.editor = window.CKEDITOR.replace('editor', {
        height: 500,
        bodyClass: 'document-editor'
      })
      console.log(this.editor)

    //  this.editor.setData(this.content)
    },
    changeview(e){
        this.$forceUpdate()
    },
    //创建新文档
    async submit(){
     
      console.log(this.editor.getData())
      console.log(this.input)
      this.content=this.editor.getData()
     // this.editor.setData('xzx')
      const {userid,input,content}=this
      console.log(this.userInfo)
      console.log(this.userInfo.userid)
      console.log(content)
      console.log(input)
      console.log('999')
      console.log(this.checkTeamInfo)
      const result=await reqCreateTeamArticle(this.userInfo.userid,this.checkTeamInfo.tid,input,content)
      console.log(result)
      this.articleid=result.fid
      console.log(this.articleid)
    },

    async change() {
      this.content=this.editor.getData()
      const result = await reqUpdate(this.input,this.articleid,this.content,this.userInfo.userid)

      console.log(result)
      console.log("One update to: " + this.articleid)
    },

    async fresh(){
      var time = 1000
      var startTime = new Date().getTime() + parseInt(time, 10);
      while(new Date().getTime() < startTime) {}
    
    this.articleid=this.onedit

      const {articleid,userid} = this
      console.log('64646')
      console.log(this.userInfo.userid)
      const result = await reqFetch(articleid,this.userInfo.userid)

          console.log(result)
          this.content = result.content
          console.log(this.content)
          
          //这里插入

          this.editor.setData(this.content)
          this.input = result.name
          console.log(this.input)
          
          this.isload=true
          console.log('acv')
          console.log(this.isload)
          this.$forceUpdate();
        
          console.log(this.onedit)
       const result2 = await reqGetComment(this.userInfo.userid,this.onedit)
        console.log(result2)
        this.comments = result2.comment
      
    },
   
    get(){
        window.location.reload()
    },
    
    share(){
     this.invitelink = location.href.replace(this.$route.path+this.$route.params,'');
      this.$alert('请通过复制以下链接来分享文档'+this.invitelink , '分享', {
        confirmButtonText: '复制链接',
        callback: action => {
          this.$copyText(this.invitelink).then(
            function(e) {
              console.log('本文档链接为: ' + e.text)
            })
          this.$message({
            type: 'success',
            message: `链接已复制到剪贴板`
          });
        }
      });

  },
    finish(){

    },
    star(){
        this.isstar=!this.isstar
        if(this.isstar==true){
          alert("已收藏")
        }
        else{
          alert("取消收藏")
        }
        const result=reqLikeornotArticle(this.articleid,this.isstar,this.userInfo.userid)
        console.log(this.articleid)
        console.log(this.isstar)
        console.log(this.userInfo.userid)
        console.log('123')
        console.log(result)
    },
    comment(){
        this.$prompt('请输入评论', '评论该文档', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        
        if (value.length === 0 || value === null) {
          alert("评论不能为空");
        } else {
          console.log(value)
          this.comment=value;
          this.addComment();
          console.log(value)
          this.$message({
            type: 'success',
            message: '评论成功！'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消评论'
        });
      });
    },
    async addComment(){
      console.log('00000')
      console.log(this.articleid)
      console.log(this.auth)
      console.log(this.comment)
      const result2 = await reqAddComment(this.userInfo.userid,this.articleid,"write",this.comment)
      console.log(result2)
      console.log('111')
      const result3 = await reqGetComment(this.userInfo.userid,this.articleid)
       console.log(result3)
      
      this.getCommentList(this.articleid)
      console.log('333')
      console.log(this.comments)
    }
  },
  
  beforeDestroy () {
    this.recordOnEdit(0)
    this.change()
  },
  destroyed() {
    this.change()
  }
}


</script>
<style>
.input{
  position: absolute;
  width: 200px;
  height: px;
  top: -10px;
}
.area{
  background-color: #faf8f8f1;
}
.areatitle{
  width: 100%;
  
}
.editarea{
  width: 90%;
  margin: auto;
  margin-top: 45px;
}
.iconfont{
  display: block;
  font-size: 50px;
  color: rgb(133, 126, 126);
  position: absolute;
  left: 70px;
}
.atitle{
 margin-left:25%;
 position: absolute;
 top: 15px;
 font-size:20px;
}
.inner{
  height:10px ;
}
.button-share{
 position: absolute;
 right: 180px;
}
.button-star{
 position: absolute;
 right: 80px;
}
.button-comment{
 position: absolute;
 right: 130px;
}
.footarea{
  margin-top: 5px;
}
#submit{
  float: right;
 margin-right: 73px;
}
</style>